<template>
  <div>
    <h1>{{ arr }}</h1>
    <br />
    <table border="1" width="25%">
      <thead>
        <tr>
          <td>姓名</td>
          <td>年龄</td>
          <td>性别</td>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in obj" :key="index">
          <td @click="($event) => ck(item.name)">{{ item.name }}</td>
          <td @click="($event) => ck(item.age)">{{ item.age }}</td>
          <td @click="($event) => ck(item.sex)">{{ item.sex }}</td>
        </tr>
      </tbody>
    </table>
    <h1>{{ sum }}</h1>
    <hr />
    <h2>{{ num | mynum }}</h2>
    <div v-changecolor="">自定义变颜色</div>
  </div>
</template>

<script>
import {} from "vue";
import son from "./components/son.vue";
export default {
  components: { son },
  data() {
    return {
      arr: [1, 2, 3, 4],
      obj: [
        { name: "马云", age: 19, sex: "男" },
        { name: "马化腾", age: 17, sex: "保密" },
      ],
      num: 1,
    };
  },
  methods: {
    ck(val) {
      alert(val);
    },
  },
  computed: {
    sum() {
      return 3;
    },
  },
  watch: {},
  filters: {
    mynum(val) {
      return val + 9;
    },
  },

  //局部指令
  // directives: {
  //   changecolor(el) {
  //     el.style.color = "red";
  //   },
  // },
};
</script>

<style>
</style>